<template>
    <view>
        <view>
            <view class="topBox">
                <text class="topSymbol">*</text>
                <text class="textx">商品封面图</text>
                <text class="text">建议裁剪为正方形(请勿上传违规图片!)</text>
            </view>
            <view class="images">
                <image src="../static/img/xiangji.png" class="image"> </image>
            </view>
        </view>

        <view class="miBoxs">
            <view class="miBox">
                <text class="symbol">*</text>
                <text class="texts">名称</text>
            </view>
            <view class="input">
                <input type="text" placeholder="请输入商品名称(12字内)" />
            </view>
        </view>

        <view class="miBoxs">
            <view class="miBox">
                <text class="symbol">*</text>
                <text class="texts">售价</text>
            </view>
            <view class="input">
                <input type="text" value="1" />
            </view>
        </view>

        <view class="miBoxs">
            <view class="miBox">
                <text class="symbol">*</text>
                <text class="texts">分类</text>
            </view>
            <view class="classify">默认分类</view>
        </view>

        <view class="bottomBox">
            <view class="save">保存</view>
            <view class="cancel">取消</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
    .topSymbol {
        color: #f06d89;
        font-size: 6vw;
        padding-right: 1vw;
    }

    .symbol {
        color: #f06d89;
        font-size: 5vw;
        padding-right: 1vw;
    }

    .topBox {
        margin-top: 2vw;
        display: flex;
        align-items: center;
    }

    .topBox,
    .miBoxs {
        padding-left: 2vw;
    }

    .textx {
        font-weight: bold;
        font-size: 5vw;
    }

    .texts,
    .classify {
        font-size: 4vw;
    }

    .text {
        padding-left: 1vw;
        color: #4b4b4b;
        padding-left: ;
    }

    .images {
        background-color: #f7f8fa;
        width: 25vw;
        height: 25vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4vw 1vw 5vw 1vw;
    }

    .image {
        width: 10vw;
        height: 10vw;
    }

    .miBoxs {
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        height: 14vw;
    }

    .miBox {
        padding-right: 15vw;
    }

    .bottomBox {
        height: 110vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .cancel,
    .save {
        width: 66vw;
        height: 15vw;
        border-radius: 10vw;
        margin: 3vw 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .save {
        background-color: #f88586;
        color: #fff;
    }

    .cancel {
        border: 1px solid #f88586;
        color: #f88586;
    }
</style>